<template>
  <div class="wrap-content">
    <div class="title">视频</div>
    <div class="list">
      <accordion
                v-for="(item) in dataList"
                :key="item.id"
                :title="item"
                :list="item.child"
                @clickItem="clickItem"
              >
                <template v-slot:title="slotProps">
                  <div style="display:flex;">
                    <img style="width:40px;height:40px;" src="../../assets/images/tabbar/index.svg" />
                    <div style="display:flex;flex-direction: column;">
                      <span style="line-height: initial;">{{ slotProps.data.area }}</span>
                      <span style="line-height: initial;">总人数：{{ slotProps.data.sum }}人</span>
                    </div>
                  </div>
                </template>
              </accordion>
    </div>
  </div>
</template>

<script>
import Accordion from "../../components/Accordion";
export default {
  name: "video",
  components: {
    Accordion
  },
  data() {
    return {
      dataList: [
        {
          area: "上海",
          num: "10",
          sum: "30",
          child: [
            { area: "浦东", num: "20", sum: "20" },
            { area: "静安", num: "20", sum: "20" },
            { area: "宝山", num: "20", sum: "20" },
            { area: "虹口", num: "20", sum: "20" },
            { area: "杨浦", num: "20", sum: "20" }
          ]
        },
        {
          area: "深圳",
          num: "10",
          sum: "30",
          child: [
            { area: "罗湖", num: "20", sum: "20" },
            { area: "福田", num: "20", sum: "20" },
            { area: "南山", num: "20", sum: "20" }
          ]
        },
        {
          area: "广州",
          num: "10",
          sum: "30",
          child: [
            { area: "白云", num: "20", sum: "20" },
            { area: "福田", num: "20", sum: "20" },
            { area: "南山", num: "20", sum: "20" }
          ]
        }
      ],
    };
  },
  mounted() {

  },
  methods: {
    clickItem(e) {
      this.$toast({
        message: "点击了item"
      });
    }
  }
};
</script>

<style lang="less" scoped>
.wrap-content {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.list {
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}
</style>